<template>
  <div class="inviteBackView">
    <div class="inviteView">
      <img class="inviteBgView" src="/web-hft-ee/static/img/university/corporate_university_windows.png"/>
      <div class="contentView" v-if="imCreator">
        <div class="qrCodeBackView">
          <img class="qrFrameView" src="/web-hft-ee/static/img/university/frame.png"/>
          <vue-qr class="codeImg" :text="codeUrl" :size="80" margin="0"></vue-qr>
        </div>
        <div class="refreshBackView" @click="changeLink">
          <img style="width: 18px" src="/web-hft-ee/static/img/university/refresh.png"/>
        </div>
        <van-button type="default" class="inviteBtn" @click="inviteClick">
          微信邀请
        </van-button>
        <span data-clipboard-action="copy" :data-clipboard-text="codeUrl" class="copyLabel"
              @click="copyClick">复制链接邀请</span>
      </div>
    </div>

    <van-overlay :show="showGuidance" @click="showGuidance = false">
      <img class="guidance" src="/web-hft-ee/static/img/university/guidance.png"/>
    </van-overlay>

  </div>

</template>

<script>
  import clipboard from 'clipboard'
  import wx from 'weixin-js-sdk'
  import {ShareUtil} from '@/utils/share_utils'
  import TeamAPI from '@/repo/api/TeamAPI'
  import VueQr from 'vue-qr'
  // import Vue from 'vue'
  import {Button, Toast, Overlay} from 'vant'

  Vue.use(Button)
  Vue.use(Overlay)
  Vue.prototype.clipboard = clipboard;

  export default {
    name: "invite",
    components: {
      VueQr
    },
    data() {
      return {
        teamId: this.$route.params.teamId,
        showGuidance: false,
        teamData: {},
      }
    },
    mounted() {
      this.getTeamData()
    },
    computed: {
      imCreator() {
        if (this.teamId == this.$store.getters.enterpriseInfo.enterprise.id) {
          if (this.$store.getters.enterpriseRoleInfo.roleType == 0) {
            return false
          } else {
            return true
          }
        } else {

          if (this.$store.getters.enterpriseRoleInfo.roleType == 2) {
            if (this.teamData.parentId == this.$store.getters.enterpriseInfo.enterprise.id) {
              return true
            } else {
              return false
            }
          } else {
            return false
          }

        }

      },
      codeUrl() {
        let host = window.location.origin
        let hsId = this.$store.getters.hsId
        let loginType = this.$store.getters.loginType;
        let path = `/web-hft-ee/university/team/invite-share/${this.teamId}/${this.teamData.inviteRec}/${this.$store.getters.userid}/${loginType}/${hsId}`
        return host + path
      }
    },
    methods: {
      getTeamData() {

        TeamAPI.getTeamInfo(this.teamId).then((res) => {
          this.teamData = res.responseData.enterprise
          Toast.clear()

          if (!this.imCreator) {
            Toast('非团队创建者不可邀请成员')
            return
          }

          let defaultPic = window.location.origin + `/web-hft-ee/static/img/default_company_head_portrait.png`;
          let pic = this.teamData.pic || defaultPic;
          console.log(pic);

          //注入微信分享数据
          ShareUtil.shareWx(["updateAppMessageShareData", "updateTimelineShareData"], () => {

            let msg = {
              title: `${this.$store.getters.userNickname}邀请你加入团队`, // 分享标题
              desc: '企业大学', // 分享描述
              link: this.codeUrl,
              imgUrl: pic,// 分享图标
              success: function () {
              },
              cancel: function () {
              }
            }

            wx.updateAppMessageShareData({
              title: msg.title,
              desc: msg.desc, // 分享描述
              link: msg.link,
              imgUrl: msg.imgUrl,
            });

            wx.updateTimelineShareData({
              title: msg.title,
              desc: msg.desc, // 分享描述
              link: msg.link,
              imgUrl: msg.imgUrl,
            });

          })

        }).catch((error) => {
          Toast.clear()
        })
      },
      changeLink() {
        Toast.loading({
          duration: 0,
          message: '更新中...',
          forbidClick: true,
        });
        TeamAPI.updateInviteCode(this.$route.params.teamId).then((res) => {
          this.getTeamData()
        }).catch((error) => {
          Toast.clear()
        })

      },
      inviteClick() {
        this.showGuidance = true
        // console.log(this.codeUrl)
        // window.location.href = this.codeUrl

      },
      copyClick() {
        let clipboard = new this.clipboard('.copyLabel')
        clipboard.on('success', function () {
          Toast('复制成功')
        })

        clipboard.on('error', function () {
          Toast('该浏览器不支持自动复制')
        })

      }
    }
  }
</script>

<style scoped>
  .inviteBackView {
    min-height: 100vh;
    background-color: #ABF2FF;
  }

  .inviteView {
    position: relative;
  }

  .inviteBgView {
    width: 100%;
  }

  .contentView {
    width: 100%;
    top: 40%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .qrCodeBackView {
    position: relative;
  }

  .qrFrameView {
    width: 100px;
    height: 100px;
  }

  .codeImg {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .refreshBackView {
    padding: 12px
  }

  .inviteBtn {
    margin-top: 12px;
    background-image: linear-gradient(225deg, #3ECFFA 0%, #1DA1F2 100%);
    color: white;
    font-size: 14px;
    border-radius: 16px;
    height: 32px;
    width: 120px;
  }

  .copyLabel {
    text-decoration: underline;
    margin-top: 12px;
    font-size: 12px;
    color: #1DA1F2;

  }

  .guidance {
    width: 100%;

  }
</style>
